<template>
  <view class="">
    <uni-swipe-action>
      <uni-swipe-action-item>
        <view class="message-item" @click="handleToDetail">
          <view class="wrapper">
            <view class="cell">
              <view class="left info">
                {{ itemData.userName || '' }}{{ infoTxt }}
              </view>
              <view v-if="itemData.isRead === 0" class="right dot" />
            </view>

            <view class="cell">
              <view class="left centent">
                <p v-if="itemData && itemData.title">
                  {{ itemData.title }}
                </p>
                <p v-else-if="itemData && itemData.orderTitle">
                  关于 "{{ itemData.orderTitle }}" 的中标公告
                </p>
              </view>
            </view>

            <view class="cell">
              <view class="left info">
                {{ itemData.createTime }}
              </view>
            </view>
          </view>
        </view>

        <view
          slot="right"
          class="control-box"
          @click="handleDelete">
          删除
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>
  </view>
</template>

<script>
  import { ReadMessage } from 'API/admin'

  export default {
    name: 'MessageItem',
    props: {
      itemData: {
        type: Object,
        required: true
      },
      type: { // 接收父组件传递的 type
        type: Number, // 或者根据需要指定其他类型
        required: false // 根据实际情况设置是否必需
      }
    },
    data() {
      return {}
    },
    computed: {
      infoTxt() {
        return {
          1: '将任务分配给您'
        
        }[this.itemData.type] || ''
      }
    },
    methods: {
      async handleToDetail() {
        this.$Router.navigateTo({
          url: '/pages_oa/notice/detail',
          query: {
            id: this.itemData.id,
            type: this.type
          }
        })
      },
      handleDelete(evt) {
        this.$emit('delete', evt)
      }
    }
  }
</script>

<style scoped lang="scss">
	.message-item {
		width: 100%;
		padding: 15rpx 32rpx;
		background-color: white;
		border-bottom: 1rpx solid $border-color;
		@include left;
		.avatar {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
		.wrapper {
			flex: 1;
			overflow: hidden;
			.cell {
				width: 100%;
				font-size: $wk-font-sm;
				@include left;
				.left {
					flex: 1;
					@include ellipsis;
				}
				.info {
					color: $light;
				}
				.dot {
					width: 15rpx;
					height: 15rpx;
					background-color: red;
					border-radius: 50%;
					margin-left: 15rpx;
				}
				.centent {
					width: 100%;
					font-size: $wk-font-base;
					color: $dark;
					margin: 5px 0;
					@include ellipsis;
				}
			}
		}
	}

	.control-box {
		width: 150rpx;
		color: white;
		font-size: $wk-font-base;
		background-color: #E60000;
		@include center;
	}
</style>
